<template>
  <div>
    <h1>v-model的使用</h1>
    用户名：<input type="text" v-model="user.userName" /> <br />
    密码：<input type="text" v-model="user.password" /> <br />
    电话：<input type="text" v-model="user.phone" /> <br />
    <button @click="content">点击收集收据</button>

    <br /><br />
    <input type="radio" value="男" v-model="gender" />男
    <input type="radio" value="女" v-model="gender" />女
    <select v-model="msg">
      <option value="1">丰田</option>
      <option value="2">本田</option>
      <option value="3">日产</option>
    </select>
    <input type="checkbox" v-model="hobby" value="吃饭" />吃饭
    <input type="checkbox" v-model="hobby" value="吃麦当劳" />吃麦当劳
    <button @click="information">点击收集收据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        userName: "",
        password: "",
        phone: "",
      },
      gender: "男",
      msg: 3,
      hobby: [],
    };
  },
  methods: {
    content() {
      console.log(this.user);
    },
    information() {
      console.log(this.gender, this.msg, this.hobby);
    },
  },
};
</script>

<style>
</style>